<template>
    <div class="vajra-view" :style="{
        width: width + 'px',
        marginTop: top + 'px',
        backgroundColor: bgcolor
    }" @dragend.stop="reset()">

        <!-- 一个个按钮 -->
        <div class="item" :index="index" :class="{
        willleave: source == index,
        willentry: target == index
    }" v-for="(item, index) in btns" :key="index" @dragover.stop.prevent @drop.stop.prevent="updateItem()"
            @dragenter.stop="setTarget(index)" draggable="true" @dragstart.stop="setSource(index)">
            <div class="icon" :style="{
        backgroundImage: 'url(' + item.icon + ')'
    }"></div>
            <div class="label" :style="{
        color: color
    }">
                {{ item.label }}
            </div>
        </div>

    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue"

let props = defineProps({
    width: {
        type: Number
    },
    top: {
        type: Number
    },
    bgcolor: {
        type: String
    },
    color: {
        type: String
    },
    btns: {
        type: Array<any>
    }
});

let isMove = ref(false), source = ref(-1), target = ref(-1);

let reset = () => {
    isMove.value = false;
    source.value = -1;
    target.value = -1;
};
let updateItem = () => {
    if (isMove.value) {
        props.btns?.splice(target.value, 0, props.btns?.splice(source.value, 1)[0]);
    }

    reset();
};
let setSource = (index: number) => {
    source.value = index;
    isMove.value = true;
};
let setTarget = (index: number) => {
    target.value = index;
};
</script>
<style lang="scss" scoped>
.vajra-view {
    margin: auto;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    padding: 6px 0;

    &>.item {
        padding: 6px 0;
        text-align: center;
        flex-basis: 25%;

        &:hover:not(.willleave) {
            background-color: rgb(244, 244, 245);
        }

        &.willleave {
            opacity: 0.2;
        }

        &.willentry {
            outline: 2px solid rgb(0, 0, 0);
        }

        &>.icon {
            width: 30px;
            height: 30px;
            background-size: 100% auto;
            margin: auto;
            margin-bottom: 10px;
        }

        &>.label {
            font-size: 12px;
        }
    }
}
</style>